/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-26 14:52:51
 * @LastEditors: chenbinfa
 * @LastEditTime: 2023-01-17 11:38:35
 * @description: 描述信息
 * @author: chenbinfa
 */
import React, { useRef, useState, useEffect } from "react";
import { Pie } from '@ant-design/plots';
import { message } from "antd";
import { CopyOutlined } from "@ant-design/icons";
import _ from "lodash";
import styled from "styled-components";
import { useNavigate } from "react-router-dom";
import moment from "moment";
import { formatterCurrency, formatterCurrencyStr, toLocaleString, formatSize, formatterSize, toFixed } from "@utils/format";
import { formatArr } from "@utils/format-show-type";
import common from "@utils/common";
import copy from "copy-to-clipboard";
import api from "@services/";
import DCard from "@/components/DCard";
import * as antdHelper from "@utils/antd-helper";
const Main = ({ className, accountInfo }) => {
    if (!accountInfo) {
        return '';
    }
    const [loading, setLoading] = useState(false);
    const [minerSpaceInfo, setMinerSpaceInfo] = useState({ used: {}, total: {}, verified: {} });//作为存储矿工，我提供的存储空间

    const initMySpaceInfo = async (d) => {
        setLoading(true);
        let total = formatSize(d.dec_space);
        let verified = formatSize(d.verified_space);
        let use = formatSize(d.service_space);

        let perUse = ((100 * d.service_space) / d.dec_space).toFixed(3) + '%';
        let perVerified = ((100 * d.verified_space) / d.dec_space).toFixed(3) + '%';
        setMinerSpaceInfo({
            used: { n: use.n, unit: use.unit, per: perUse },
            total: { n: total.n, unit: total.unit, per: '100%' },
            verified: { n: verified.n, unit: verified.unit, per: perVerified }
        });
        setLoading(false);
    }

    useEffect(() => {
        initMySpaceInfo(accountInfo.Storage);
    }, [accountInfo]);


    return (
        <div className={className}>
            <DCard className="bbbox" icon={<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/space.png"} />} title="Space Info">
                <div className="line-1">
                    Used {toLocaleString(minerSpaceInfo.used.n)} {minerSpaceInfo.used.unit} / Verified {toLocaleString(minerSpaceInfo.verified.n)} {minerSpaceInfo.verified.unit} / {toLocaleString(minerSpaceInfo.total.n)} {minerSpaceInfo.total.unit}
                </div>
                <div className="line-2">
                    <div>
                        <span style={{ width: minerSpaceInfo.verified.per }} title={minerSpaceInfo.verified.per}>
                            <label style={{ width: minerSpaceInfo.used.per }} title={minerSpaceInfo.used.per}></label>
                        </span>
                    </div>
                </div>
                <div className="line-3">
                    <label>Used</label>
                    <span style={{marginLeft:20}}>Verified</span>
                </div>
            </DCard>
        </div>
    );
};

export default React.memo(styled(Main)`
    .dcard-body{
        width: calc(100% - 20px);
        margin:10px;
    }
    .line-1{
        width: 100%;
        height:40px;
        line-height: 40px;
        display: block;
        overflow: hidden;
        text-align: right;
    }
    .line-2{
        margin:0px 0 8px;
        div{
            width:100%;
            background-color: rgba(238, 238, 238, 1);
            border-radius: 5px;
            transition: width 5s;
            span{
                background-color:rgba(254, 226, 100, 1);
                width:0%;
                height:20px;
                display: block;
                overflow: hidden;
                border-radius: 5px;
                transition: width 5s;					
            }
            label{
                width:0%;
                height:20px;
                display: block;
                overflow: hidden;
                background-color:rgba(60, 104, 206, 1);
                border-radius: 5px;
                transition: width 5s;
            }
        }
    }
    .line-3{
        display: flex;
        flex-direction: row;
        margin-bottom: 10px;
        label,span{
            display: flex;
            flex-direction: row;
            align-items: center;
            ::before{
                content: "";
                width:10px;
                height:10px;
                display: inline-block;
                border-radius: 100%;
                margin-right:5px;
            }
        }
        label::before{
            background-color:rgba(60, 104, 206, 1);
        }
        span{
            margin-right:30px;				
        }
        span::before{
            background-color:rgba(254, 226, 100, 1);
        }
        div{
            flex:1;
            text-align: right;
        }
    }
`);
